<template>
  <div class="register">
    <!-- 注册 -->
    <van-sticky>
      <nav-bar class="nav-bar" is-back>
        <template #center>
          <div class="nav-bar-center">
            <span>注册</span>
          </div>
        </template>
      </nav-bar>
    </van-sticky>

    <!-- 注册页面的内容 -->
    <div class="form">
      <van-form validate-first @submit="handleRegister" ref="formRef">
        <!-- 头像上传 -->
        <van-field
          name="uploader"
          label="头像"
          :rules="[
            { validator: (value) => value.length > 0, message: '头像不能为空' }
          ]"
        >
          <template #input>
            <van-uploader v-model="formData.avatar" :max-count="1" />
          </template>
        </van-field>
        <!-- 昵称 -->
        <van-field
          v-model="formData.nickName"
          name="昵称"
          label="昵称"
          placeholder="昵称"
          :rules="[nickNamePattern]"
        />
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field
          v-model="formData.phone"
          type="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[phonePattern]"
        />
        <!-- 验证码 -->
        <van-field
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
          v-model="code"
          :rules="[
            {
              validator: (value) => value === validatorCode && value != '',
              message: '验证码输入错误'
            }
          ]"
        >
          <template #button>
            <van-button
              size="mini"
              @click="handleSendCode"
              native-type="button"
              color="var(--theme-color)"
              :disabled="text !== '发送验证码'"
              style="width: 70px"
            >
              {{ text }}
            </van-button>
          </template>
        </van-field>
        <!-- 密码 -->
        <van-field
          v-model="formData.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[passwordPattern]"
        />
        <!-- 性别 -->
        <van-field name="gander" label="性别">
          <template #input>
            <van-radio-group
              direction="horizontal"
              v-model="formData.gander"
              checked-color="var(--theme-color)"
            >
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 邮箱 -->
        <van-field
          label="邮箱"
          placeholder="请输入邮箱"
          v-model="formData.email"
          :rules="[emailPattern]"
        />
        <!-- 注册 -->
        <van-button
          block
          color="var(--theme-color)"
          round
          size="small"
          style="margin-top: 30px"
        >
          注册
        </van-button>
        <!-- 已有账号 -->
        <div class="account" @click="$router.push('/login')">
          已有帐号？去登陆
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { sendCode, register } from '@/api'
import {
  Toast,
  nickNamePattern,
  phonePattern,
  passwordPattern,
  emailPattern
} from '@/utils'
import NavBar from '../../components/nav-bar/nav-bar.vue'
export default {
  components: {
    NavBar
  },
  data: () => ({
    formData: {
      avatar: [],
      nickName: '',
      phone: '', // 手机号
      password: '',
      gander: '1',
      email: ''
    },
    code: '', // 输入的验证码
    validatorCode: '123456', // 获取到的验证码,
    text: '发送验证码', // 按钮内容
    nickNamePattern,
    phonePattern,
    passwordPattern,
    emailPattern
  }),
  methods: {
    // 发送验证码
    async handleSendCode() {
      if (!phonePattern.pattern.test(this.formData.phone)) {
        Toast.fail('手机号码不能为空')
        return
      }
      this.validatorCode = await sendCode({
        phone: this.formData.phone
      })
      Toast.success('验证码发送成功')
      let time = 60
      // 60s后才能从新发送
      const timer = setInterval(() => {
        --time
        this.text = time <= 0 ? '发送验证码' : time + 's'
        if (time <= 0) clearInterval(timer)
      }, 1000)
    },
    // 注册
    async handleRegister() {
      // 表单对象
      const formObj = new FormData()
      // 设置表单数据
      for (const key in this.formData) {
        formObj.set(
          key,
          key == 'avatar' ? this.formData[key][0].file : this.formData[key]
        )
      }
      const data = await register(formObj)
      Toast.success(data)
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.register {
  background: white;
}
.form {
  width: 95%;
  height: calc(100vh - 44px);
  margin: 30px auto;
}
// 样式穿透
/deep/ input::placeholder {
  font-size: 9px;
}
.account {
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  margin-top: 20px;
}
</style>
